<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>修改试卷组装页面</title>
		 <link rel="stylesheet" href='<c:url value="/share/bootstrap.min.css"></c:url>'> 
		 <script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
		<script src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
		<script src='<c:url value="/js/all.js"></c:url>'></script> 
		<script type="text/javascript" src='<c:url value="/js/boot.js"></c:url>'></script>
		<script type="text/javascript"
		src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>
		<style type="text/css">
			.header_nav_1,.header_nav_1_current{
				float: left;
				margin-right: 50px;
				margin-top: 35px;
			}
			.header_nav_2{
				float: right;
				margin-top: 35px;
			}
			.header_nav_1 span{
				background: #B8B8B8;
				color: #fff;
				padding:2px 6px;
				border-radius: 50%;
			}
			.header_nav_1 font{
				font-family: "微软雅黑";
				font-size: 18px;
				color: #b8b8b8;
				font-weight: 600;
			}
			.header_nav_1_current span{
				background: #2b5eae;
				color: #fff;
				padding:2px 6px;
				border-radius: 50%;
			}
			.header_nav_1_current font{
				font-family: "微软雅黑";
				font-size: 18px;
				color: #2b5eae;
				font-weight: 600;
			}
			
			.header_nav_2 div{
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 600;
				color: #2b5eae;
				padding: 3px 20px;
				border: 1px solid #fff;
			}
			.header_nav_2 >div:hover{
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 600;
				color: #fff !important;
				border: 1px solid #B8B8B8;
				background: #82bcff;
				padding: 3px 20px;
				border-radius: 2px;
			}
			hr {
			    margin-top: 10px;
			    margin-bottom: 30px;
			    border: 0;
			    border-top: 2px solid #2459aa;
			}
			.header_content_center{
				width: 790px;
				/*max-width: 1190px;*/
				margin: 0 auto;  
				position: relative;
			}
			.plus{
				font-size: 50px;
				color: #B8B8B8;
				margin-top:30% ;
				
				text-align: center;
			}
			.header_content_center_content_border{
				border: 1px dashed #B8B8B8;
				float: left;
				margin-bottom: 30px;
				width: 120px;
				height: 120px; 
				border-radius: 5px;
				margin-right: 60px;
			} 
			.header_content_center_content_text{
				margin: 15px 25px;
				color: #B8B8B8; 
				font-weight: 600;
			}
			
			.content_Examination_list_left>ul{
				padding: 0px;
				
			}
			.content_Examination_list_left>ul>li{
				width: 105px !important;
			    padding: 10px 30px;
			    background: #c4dfff;
			    color: #fff;
			    margin-bottom: 10px;
			    cursor : pointer;
			}
			
			.content_Examination_list_left{
				margin-top: 20px;
				padding: 0;
				width: 105px;
				left: -105px;
			}
			.jake_Wang_Bg295c96{
				background: #295c96 !important;
			}
			
			 .Examination_list>li{
				width: 790px;
				text-align: left;
				padding: 15px;
				margin-bottom: 15px;
				margin-top: 15px;
				border: 1px solid #494949;
				list-style-type:none;
			}
			.Examination_list>li:nth-child(1){
				margin-top: 0;
			}
			.Examination_list>li:nth-last-child(1){
				margin-bottom: 0;
			}
			.Examination_list_title{
				border: 1px solid #a4a4a4;
				padding: 6px 12px;
			}
			.Examination_list_title>span{
				background: #295c96;
			    color: #fff;
			    padding: 3px 6px;
			    border-radius: 50%;
			}
			.Examination_list_content{
				border: 1px solid #a4a4a4;
				padding: 10px 25px;
				margin-top: 10px;
			}
			.Examination_list_content>li{
				width: 100% !important;
				position: relative;
	    		overflow: hidden;
	    		padding: 4px 0;
			}
			.Examination_list_content>li>input{
				float: left;
				margin-right: 10px;
			}
		</style>
	</head>
	<body >
		<div class="header_content_center">
			<div class="row" style="margin: 0 auto">
				<div class="header_nav_1">
					<span >1</span>
					<font >新建问卷</font>
				</div>
				<div class="header_nav_1_current">
					<span >2</span>
					<font >问卷组装</font>
				</div>
				<div class="header_nav_1 ">
					<span >3</span>
					<font >配置用户</font>
				</div>
				<div class="header_nav_2">
					<div onclick="preview()" style="cursor:pointer;"> 
						预览
					</div>
					<div onclick="save()" style="cursor:pointer;"> 
						保存
					</div>
					<div onclick="last()" style="cursor:pointer;"> 
						上一步
					</div>
					<div onclick="next()" style="cursor:pointer;">
						下一步
					</div>
				</div>
			</div>
			
			<div>
				<hr />
			</div>
		</div>
		<div class="header_content_center">
			<div class="header_nav_btn">
				<div class="header_content_center_content_border" id="question_0" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加单选题</div>
				</div>
				<div class="header_content_center_content_border" id="question_1" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加多选题</div>
				</div>
				<div class="header_content_center_content_border" id="question_2" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加判断题</div>
				</div>
				<div class="header_content_center_content_border" id="question_3" style="cursor:pointer;">
					<div class="plus">+</div>
					<div class="header_content_center_content_text">添加问答题</div>
				</div>
				
			</div>
			<div id="content_list">
				<div  style="float: left;" id = "list">
					<ul class="Examination_list" style="margin-left: -40px;width: 100%;max-width: 1190px;" id="questionType_0">
					</ul>
					<ul class="Examination_list" style="margin-left: -40px;width: 100%;max-width: 1190px;" id="questionType_1">
					</ul>
					<ul class="Examination_list" style="margin-left: -40px;width: 100%;max-width: 1190px;" id="questionType_2">
					</ul>
					<ul class="Examination_list" style="margin-left: -40px;width: 100%;max-width: 1190px;" id="questionType_3">
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	var rootPath = '${rootPath}';
	var paperId = '${paperId}';
	var isSave=false;
	
	$(function() {
		getTestIdList();
	});
	function getTestList(id) {
		var url = rootPath + "/surveyPaper/questionListData";
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {
				'data' : id
			},
			success : function(data) {
				if (data) {
					showTest(data);
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				alert("失败！");
			}
		});
	}
	
	
	$("#question_0").click(function(){
		getQuestionList("单选题");
	});
	$("#question_1").click(function(){
		getQuestionList("多选题");
	});
	$("#question_2").click(function(){
		getQuestionList("判断题");
	});
	$("#question_3").click(function(){
		getQuestionList("问答题");
	});
	function preview(){
		save(function(){
			window.open(rootPath + '/surveyPaper/checkMv/' + paperId); 
		})
	}
	var questionId="";
	var old_questionId="";
	function getQuestionList(type) {
		mini.open({
			url : rootPath + "/surveyPaper/questionListMv/" + type,
			title : "选择列表",
			width : 900,
			height : 600,
			onload : function() {
			},
			ondestroy : function(action) {
				if (action == "close") {
					return;
					//getTestList(questionId);
				} else {
					var str = action.split(",");
					if(!questionId){
						questionId = action;
					}else{
						var questions = questionId.split(",");
						for(var i = 0; i < str.length; i++ ){
							var flag = false;
							for (var j = 0;j < questions.length; j++) {
								if (questions[j]==str[i]){
									flag = true;
									continue;
								}
							}
							if(!flag){
								questionId += "," + str[i];
							}
						}
					}
					getTestList(questionId);
				}
			}
			});
		}
		function showTest(data) {
			var htmStr0=""; 
			var htmStr1=""; 
			var htmStr2=""; 
			var htmStr3=""; 
			var htmStr="";
			for(var i = 0; i < data.length; i++){
				if (data[i].class_id == "单选题") {
					htmStr0 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					var str = data[i].selects;
					var arr = str.split(",nwebadjj,_");
					for (var j = 0; j < arr.length; j++) {
						var option = String.fromCharCode(j + 65);
						htmStr0 += "<li>"
								+ "<input type=\"radio\" name=\"radio1\" />&nbsp;"
								+ "<font>" + option + '、' + arr[j] + "</font>"
								+ "</li>";
					}
					htmStr0 += "</ul></li>";
				}else if (data[i].class_id == "多选题") {
					htmStr1 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					var str = data[i].selects;
					var arr = str.split(",nwebadjj,_");
					for (var j = 0; j < arr.length; j++) {
						var option = String.fromCharCode(j + 65);
						htmStr1 += "<li>"
								+ "<input type=\"checkbox\" name=\"check1\" />&nbsp;"
								+ "<font>" + option + '、' + arr[j] + "</font>"
								+ "</li>";
					}
					htmStr1 += "</ul></li>";
				}else if (data[i].class_id == "判断题") {
					htmStr2 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					htmStr2 += "<li><input type=\"radio\" name=\"radio1\" />&nbsp;<font>是</font>"
								+ "</li><li><input type=\"radio\" name=\"radio1\" />&nbsp;<font>否</font>"
								+ "</li>";
					htmStr2 += "</ul></li>";
				}else if (data[i].class_id == "问答题") {
					htmStr3 += "<li><div class=\"close\" style=\"margin-top:-15px;margin-right: -45px;\">"
						+ "<a onclick=\"_delete("+data[i].id+")\"><img src=\""+rootPath+"/share/img/icon/close_02.png\" class=\"deleteEle\" alt=\"关闭\" /></a>"
						+ "</div>"
						+ "<div class=\"Examination_list_title\">"
						+ "<font>"
						+ data[i].question
						+ "</font>"
						+ "</div>"
						+ "<ul class=\"Examination_list_content\">";
					htmStr3 += "<p style =\"height:45px\"></p>";
					htmStr3 += "</ul></li>";
				}
			}
			$("#questionType_0").html(htmStr0);
			$("#questionType_1").html(htmStr1);
			$("#questionType_2").html(htmStr2);
			$("#questionType_3").html(htmStr3);
			$(".deleteEle").click(function() {
				$(this).parent().parent().parent().remove();
			});
		}

		
		function save(callBackfunction) {
			if (!questionId) {
				alert("请添加试题！");
			} else {
				if(old_questionId===questionId){
					if (callBackfunction) {
						callBackfunction();
					}else{
						return;
					}
				}
				var url = rootPath;
				if(!old_questionId){
					url +="/surveyPaper/addTest/" + paperId;
				}else{
					url+="/surveyPaper/updatePaperTest/" + paperId;
				}
				$.ajax({
					url : url,
					method : "post",
					dataType : "json",
					data : {
						'data' : questionId
					},
					success : function(data) {
						if (data) {
							top.commonTools.showTip("保存成功!", 1);
							isSave = true;
							if (callBackfunction) {
								callBackfunction();
							}
						} else {
							top.commonTools.showTip("保存失败!", 2);
						}
					},
					error : function() {
						top.commonTools.showTip("失败!", 2);
					}
				});
			}
		}

		function getTestIdList() {
			var url = rootPath + "/surveyPaper/testList/" + paperId;
			$.ajax({
				url : url,
				method : "post",
				dataType : "html",
				data : {},
				success : function(data) {
					if (data) {
						questionId = data;
						old_questionId = data;
						getTestList(questionId);
					} else {
						//alert("获取信息失败！");
					}
				},
				error : function() {
					top.commonTools.showTip("保存失败!", 2);
				}
			});
		}
		function _delete(id) {
			var questions = questionId.split(",");
			questionId = "";
			for(var i = 0; i<questions.length;i++){
				if(questions[i] != id){
					if(!questionId){
						questionId = questions[i];
					}else{
						questionId +="," + questions[i];
					}
				}
			}
		}
		
		function last(){
			if(isSave){
				location.href = rootPath + "/surveyPaper/updateMv/" + paperId;
			}else{
				save(function(){
					location.href = rootPath + "/surveyPaper/updateMv/" + paperId;
				})
			}
		}
		function next(){
			if(isSave){
				location.href = rootPath + "/surveyPaper/paperSetup/" + paperId;
			}else{
				save(function(){
					location.href = rootPath + "/surveyPaper/paperSetup/" + paperId;
				})
			}
		}
	</script>
</html>
